<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        body{
            background-image: url("{% static 'images/tupian1.jpg' %}");
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
        h1{
            text-align: center;
            font-size: 50px;
        }
        p{
            text-align: center;
            font-size: 25px;
            color: white;
        }
        .but{
            margin-top: 15px;
            width: 180px;
            height: 30px;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            background:linear-gradient(to right,#f30909 0%,#4013e6e1 100%);
            border: 0;
            border-radius: 15px;
        }
        .in{
            width: 180px;
            font-size: 18px;
            border: 0;
            border-bottom: 2px solid white;
            padding: 5px 10px;
            background:#ffffff00;
            color: white;
        }
        #login h1{
            color: #fff;
            text-shadow:0 0 10px;
            letter-spacing: 1px;
            text-align: center;
        }
        #login{
            width: 30%;
            height: auto;
            margin: 0 auto;
            margin-top: 5%;
            text-align: center;
            background: #00000060;
            padding: 20px 50px;
        }
    </style>
    <script type="text/javascript">

        /* 检验两次密码输入是否一致 */
        function checkPassword(){
            // 可以首先对该密码进行正则校验, 比如: 密码是刘伟数字
            var pwd1 = document.getElementById("password").val;
            var pwd2 = document.getElementById("password2").val;

            var passwordSpan = document.getElementById("passwordSpan")
            if(pwd1 != pwd2){
                passwordSpan.innerHTML = "<font color='red'>两次密码不一致, 请重新输入</font>";
            } else {
                passwordSpan.innerHTML = "<font color='white'>√</font>";
            }
        }

        window.onload = function(){
            // 等页面中所有内容都加载完毕之后, 才执行这里
            createCode();
        }

        /* 产生验证码  该功能应该出现在后台, 我们这里是在前台进行ige模拟而已 */
        function createCode(){
            var chars = "abcdefghijkmnpqrstuvwxyABCDEFGHJKLMNPQRSTUVWXY23456789";

            code = "";
            for (var i = 0; i < 5; i ++){
                var ch = chars.charAt(Math.floor(Math.random() * chars.length));

                code += ch;
            }

            console.debug(code);

            // 把产生的验证码写到前端指定的位置
            document.getElementById("checkCode").innerHTML = code;

            return code;
        }

        /* 对输入的验证码进行校验, 就是产生的和输入的进行比较是否一致 */
        function validate(){
            // 这是用户输入的验证码
            var inputCode = document.getElementById("validateCode").value.toUpperCase();


            if(inputCode != code.toUpperCase()){
                document.getElementById("error_msg").innerHTML = "验证码有误, 请重新输入";
                // 马上产生新的验证码
                createCode();

                return false;
            }

            return true;
        }

    </script>

</head>
<body style="text-align: center">
<div id="login">
    <h1>注册新用户</h1>
    <form action="/app/user/createUser/" method="post">

        {% csrf_token %}

        <p>
            账号:<input type="text" name="username" id="username" class="in">
        </p>
        <p>
            密码:<input type="password" name="password" id="password" class="in">
        </p>
        <p>
            确认:<input type="password" id="password2" onblur="checkPassword()" class="in">
            <span id="passwordSpan"></span>
        </p>
        <p>
            电话:<input type="text" name="phone" id="phone" class="in">
        </p>
        <p>
            验证码:<input type="text" id="validateCode" name="validateCode" onblur="validate()" class="in">
            <span id="checkCode" style="cursor: pointer" onclick="createCode()"></span>
        </p>

        <button type="submit" class="but">立即创建</button>

</form>
</div>>
<label id="error_msg" style="color: red">{{ error_msg }}</label>
<label id="success_msg" style="color:blue;">{{ success_msg }}</label>

</body>
</html>